
<!-- 
All rights Reserved, Designed By www.youyacao.com 
@Description:视频编辑
@author:成都市一颗优雅草科技有限公司     
@version 松鼠聚合直播系统v2.0
注意：本前端源码遵循 MulanPSL-2.0开源协议（木兰宽松许可证）本内容仅限于个人参考，禁止用于其他的商业用途
需要商业用途或者定制开发等可访问songshu.youyacao.com   联系QQ:422108995 23625059584

 -->

<template>
    <div>
        <van-nav-bar
                :title="pageTitle"
                left-text="返回"
                left-arrow
                fixed
                @click-left="onClickLeft"
        />
        <div style="padding-top: 56px;">
            <van-cell-group>
                <van-field
                        clearable
                        label="视频标题"
                        v-model="videoTitle"
                        placeholder="请输入视频标题" />
                <van-row style="padding: 10px 15px;color: #323233;font-size: 14px;">
                    <van-col span="8">封面图片</van-col>
                    <van-col span="16">
                        <van-uploader v-model="imageList" :after-read="afterRead" :before-delete="deleteImage" :max-count="1" />
                    </van-col>
                </van-row>
                <van-field
                        clearable
                        label="图片地址"
                        v-model="imageUrl"
                        placeholder="图片地址" />
                <van-field
                        clearable
                        label="视频地址"
                        v-model="videoUrl"
                        placeholder="请输入视频地址或点击上传按钮上传" />
                <div style="padding: 10px; text-align: center;">
                    <van-uploader accept="video/*" v-model="videoList" :after-read="afterReadVideo" :preview-image="false">
                        <van-button icon="video-o" type="info">上传视频</van-button>
                    </van-uploader>
                </div>
            </van-cell-group>

            <div style="padding: 20px;">
                <van-button type="primary" style="height: 40px; line-height: 40px;" size="large" @click="submitData()">确认保存</van-button>
            </div>

        </div>
    </div>
</template>

<script>
    import global_ from '../Global';
    import { Dialog } from 'vant';
    import { Notify } from 'vant';
    import { Toast } from 'vant';

    export default {
        name: "editvideo",
        data(){
            return {
                pageTitle:"添加小视频",
                videoTitle:"",
                imageList:[],
                videoList:[],
                imageUrl:"",
                videoUrl:"",
                videoid:""
            }
        },
        created(){
            var id = this.$route.query.id;
            if(id){
                this.pageTitle = "修改小视频";
                const toast = Toast.loading({
                    mask: true,
                    duration: 0,
                    message: '加载中...'
                });
                this.$axios.get(global_.serverUrl+"admin/video/get_video",{
                    params:{
                        id:id
                    }
                }).then((res)=>{
                    toast.clear();
                    if(res.code == 1){
                        this.videoid = res.data.id;
                        this.videoTitle = res.data.title;
                        this.imageUrl = res.data.img;
                        if(this.imageUrl.length) this.imageList.push({url:this.imageUrl});
                        this.videoUrl = res.data.address;
                    }else{
                        Dialog.alert({
                            title: '提示',
                            message: res.msg
                        }).then(() => {
                            this.$router.go(-1);
                        });
                    }
                }).catch(()=>{
                    toast.clear();
                    Dialog.alert({
                        title: '提示',
                        message: "加载数据出错"
                    }).then(() => {
                        this.$router.go(-1);
                    });
                })
            }
        },
        methods:{
            onClickLeft:function () {
                this.$router.go(-1);
            },
            submitData:function () {
                if(this.videoTitle.length == 0){
                    Dialog({ message: '视频标题不能为空' });return;
                }
                if(this.videoUrl.length == 0){
                    Dialog({ message: '视频地址不能为空' });return;
                }
                var toast = Toast.loading({
                    mask: true,
                    duration: 0,
                    message: '提交中...'
                });
                this.$axios.post(global_.serverUrl+"admin/video/save_video",{
                    id:this.videoid,
                    title:this.videoTitle,
                    imageurl:this.imageUrl,
                    videourl:this.videoUrl
                }).then((res)=>{
                    toast.clear();
                    if(res.code != 1){
                        Toast(res.msg);
                    }else{
                        Notify({ type: 'success', message:res.msg });
                        if(this.videoid.length == 0) this.$router.replace("/video");
                    }
                }).catch(()=>{
                    toast.clear();
                });

            },
            afterRead:function (file) {
                const toast = Toast.loading({
                    mask: true,
                    duration: 0,
                    message: '上传中...'
                });
                const formData = new FormData();
                formData.append('file',file.file, file.file.name);
                formData.append('oldfile',this.imageUrl);
                let config = {
                    headers:{
                        'Content-Type':'multipart/form-data'
                    }
                };

                this.fileList = [];

                this.$axios.post(global_.serverUrl+"admin/video/upload_image",formData,config).then((response)=>{
                    toast.clear();
                    if(response.code != 1){
                        Notify(response.msg);
                    }else{
                        Toast("封面上传成功！");
                        this.fileList.push({'url':'/'+response.data.filepath});
                        this.imageUrl = response.data.filepath;

                    }
                }).catch(function (error) {
                    toast.clear();
                });
            },
            afterReadVideo:function (file) {
                const toast = Toast.loading({
                    mask: true,
                    duration: 0,
                    message: '上传中...'
                });
                const formData = new FormData();
                formData.append('file',file.file, file.file.name);
                formData.append('oldfile',this.videoUrl);
                let config = {
                    headers:{
                        'Content-Type':'multipart/form-data'
                    }
                };

                this.$axios.post(global_.serverUrl+"admin/video/upload_video",formData,config).then((response)=>{
                    toast.clear();
                    if(response.code != 1){
                        Notify(response.msg);
                    }else{
                        Toast("视频上传成功！");
                        this.videoUrl = response.data.filepath;
                    }
                }).catch(function (error) {
                    toast.clear();
                });
            }
        }
    }
</script>

<style scoped>

</style>
